<template>
  <div>
    <h2>欢迎光临vue开发的收银系统水果店</h2>
    <table>
      <tr>
        <td>苹果10￥/斤，折扣&gt;8折&lt;</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数<input type="text" v-model.number="weight" />
        </td>
      </tr>
      <tr>
        <td><button @click="statement">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价:{{ sum }}￥元折后价:{{ sum * 0.8 }}￥元省了:{{
            sum - sum * 0.8
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  // name: "",
  components: {},
  props: {},
  data() {
    return {
      weight: 0,
      sum: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    statement() {
      this.sum = this.weight * 10;
    },
  },
};
</script>

<style scoped>
div {
  text-align: center;
}
table {
  margin: 0 auto;
  width: 500px;
  border: 1px solid #ccc;
}
tr,
td {
  border: 1px solid #ccc;
}
</style>
